<!DOCTYPE html>
<html>
<head>
    <title>Graph Visualization Access Info</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .status {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .access-link {
            display: block;
            text-align: center;
            padding: 15px 30px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 18px;
            margin: 20px auto;
            max-width: 300px;
            transition: all 0.3s;
        }
        .access-link:hover {
            background: #5a67d8;
            transform: scale(1.05);
        }
        .feature {
            margin: 15px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .feature h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 Graph Visualization System</h1>

        <div class="status">
            <h2>✅ Server Status: Running</h2>
            <p><strong>Port:</strong> 5555</p>
            <p><strong>Total Nodes:</strong> 7,518</p>
            <p><strong>Total Edges:</strong> 18,990</p>
        </div>

        <a href="http://localhost:5555" target="_blank" class="access-link">
            🚀 Open Visualization
        </a>

        <h2>🎨 Implemented Features:</h2>

        <div class="feature">
            <h3>1. Full Screen Display</h3>
            <p>✅ Width: 100% of screen (removed 1600px limit)</p>
            <p>✅ Height: calc(100vh - 200px) for dynamic viewport sizing</p>
        </div>

        <div class="feature">
            <h3>2. Node Color Coding (4 Types)</h3>
            <p>🔴 <strong>Center Node</strong> - The main queried node</p>
            <p>🟦 <strong>Class</strong> - Java classes</p>
            <p>🟨 <strong>Directory</strong> - Folder structures</p>
            <p>🔵 <strong>File</strong> - Source files</p>
            <p>🟢 <strong>Function</strong> - Methods and functions</p>
        </div>

        <div class="feature">
            <h3>3. Edge Color Coding (4 Types)</h3>
            <p>🟢 <strong>Contains</strong> - Directory contains files</p>
            <p>🔵 <strong>Imports</strong> - Import dependencies</p>
            <p>🔴 <strong>Inherits</strong> - Class inheritance</p>
            <p>🟠 <strong>Invokes</strong> - Method calls</p>
        </div>

        <div class="feature">
            <h3>4. Edge Click Functionality</h3>
            <p>✅ Click on edges to view properties</p>
            <p>✅ Shows source node, target node, and edge type</p>
            <p>✅ Displays any additional edge metadata</p>
        </div>

        <div class="feature">
            <h3>5. Interactive Features</h3>
            <p>✅ Search nodes by name</p>
            <p>✅ Filter by degree</p>
            <p>✅ Adjust depth levels (1-3)</p>
            <p>✅ Double-click to expand nodes</p>
            <p>✅ Click nodes/edges for details</p>
        </div>

        <h2>📡 API Endpoints:</h2>
        <ul>
            <li><code>GET /api/stats</code> - Graph statistics</li>
            <li><code>GET /api/search?q=keyword</code> - Search nodes</li>
            <li><code>GET /api/graph/node_id</code> - Get subgraph</li>
            <li><code>GET /api/node/node_id</code> - Node details</li>
            <li><code>GET /api/expand/node_id</code> - Expand node</li>
        </ul>
    </div>
</body>
</html>